// createApp(App).mount('#app')
// 运动的正方体

import { Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshBasicMaterial, Mesh } from 'three'

const scene = new Scene()
// 透视摄像机
// PerspectiveCamera(FOV, aspectRatio, near, far)
// - FOV  视野角度
// - aspectRatio 长宽比
// - near 近截面
// - far  远截面
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

// 渲染器
const renderer = new WebGLRenderer()
// 设置渲染器的大小
// updateStyle 设置为 false 可以优化性能
renderer.setSize(window.innerWidth, window.innerHeight, false)

// 添加到界面
document.body.appendChild( renderer.domElement )

// 添加立方体
const geometry = new BoxGeometry()
// 添加材质
const material = new MeshBasicMaterial({ color: 0x00ff00 })
// 添加网格
const cube = new Mesh(geometry, material)
// 添加
scene.add( cube )

camera.position.z = 5

// 渲染场景 ===========================
function animate(): void {
  requestAnimationFrame(animate)
  // 让正方体运动
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01
  renderer.render(scene, camera)
}

animate()